<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <style>
      .box {

        width: 250px;
        height: 250px;
        border: 1px solid #000;

      }

    </style>
</head>
<body>

    <div id="app">

    <!-- 

      零件1：动态添加style的方式（数量较少的情况）

      一休时刻：由于要使用动态的设置style的值，所以首先，style的右边要成为插值语法区域，
               可以使用数据进行控制，且style的值最终一定要为字符串，于是可以联想到
               v-bind动态类中的零件1的方式2那样解决问题。

          状况：由于style赋值号的右侧一定要是字符串，而在插值语法区域中background-color会被直接认定为变量
                但是直接使用单引号转为字符串表达式无法生效，如何让它保持键值对的形式
                且background-color也可以作为字符串的形式呢？

          解决：在 v-bind动态类中的零件2中的处理方式，恰好可以处理这种情况

          注：background-color 在js环境中要写成backgroundColor形式

          注意：当三目运算中，返回的值为空字符串,null和undefined时(即布尔值为false时)，vue会连同该键值一起将它们整体从DOM中删除

     -->

      <div class="box" :style= "{ 
        backgroundColor: isActive ? 'tomato': 'gold',
        margin: isCenter ? '0 auto': null
      }" ></div>

    <!-- 

      零件2：动态添加style的方式（数量较多的情况）

      将它们分别以对象的形式保存到data的数据中，然后，再使用一个数组将以变量的形式整体绑定到style的右侧值中。

     -->

     <div class="box" :style= "[style1,style2]" ></div>




    </div>
</body>
<script>

    Vue.config.productionTip = false; 

    const vm = new Vue({
      el: "#app",
      data() {
        console.log(this);
        return {
          /*
            引申：
            如何在这里使用isActive:true,isCenter:true？
          */ 
          isActive:true,
          isCenter:true,
          style1: { backgroundColor: 'tomato'},
          style2: { margin: '0px auto'},
        };
      
      },
    });

   
  </script>


</html>